<template>
    <div class="btncontainers">
        <button @click="sbumit" class="btncontainers-item" :style="buttonstyles">
            <!--加载中-->
            <van-loading v-show="loadingshow" :size="cirlesize" class="loading"/>
            <!--图标-->
            <img  v-if="imgshow" :src="require(`${imgurl}`)" class="btncontainers-item-img"/>
            <!--文本-->
            <span class="btncontainers-item-span" :style="spanstyles">{{text}}</span>
        </button>
    </div>
</template>

<script>
export default {
    props:["text","fontSize","loadings","imgurl","width","height","background","color","sizes","shape","callback","imgwidth","imgheight"],
    data(){
         return{
           imgshow:false,
           buttonstyles:{},
           spanstyles:{},
           imgstyles:{}
         }       
    },
    computed:{
        cirlesize(){
            return this.sizes || "16px"
        },
        loadingshow(){
            if(this.loadings==undefined){
                return false
            }else{
                return this.loadings
            }
        }
    },
    created(){
        if(this.imgurl){
            this.imgshow=true
        }
        this.buttonstyles={
            width:this.width || "100px" ,
            height:this.height || "32px",
            borderRadius:this.shape || "0px",
            border:this.borderWidth?this.borderWidth:"none",
            borderColor:this.border || "blue",
            background:this.background || "#fff"
        }
        this.imgstyles={
            width:this.imgwidth || "32px",
            height:this.imgheight || "32px"
        }
        this.spanstyles={
            fontSize:this.fontSize || "12px",
            color:this.color || "blue"
        }
    },
    methods:{
        sbumit(){
            this.callback?this.callback():()=>{}
        }
    }
}
</script>

<style>
.btncontainers{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btncontainers-item{
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: solid;
}
.btncontainers-item-img{
    width: 32px;
    height: 32px;
    margin-right: 5px;
}
.btncontainers-item-span{

}
.loading{
    margin-right: 5px;
}
</style>